<template>
    <el-main>
      <el-card>
          <h1 style="font-size:30px">聊天记录</h1>
        <el-form :inline="true" :model="interActive" class="demo-form-inline">
            <el-form-item label="患者名称">
                <el-input v-model="interActive.patientName" placeholder="患者名称"></el-input>
            </el-form-item>
             <el-form-item label="医生名称">
                <el-input v-model="interActive.doctorName" placeholder="医生名称"></el-input>
            </el-form-item>
              <el-form-item label="聊天时间">
                        <el-date-picker
                        v-model="data"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit"  icon="el-icon-search">查询</el-button>
                <el-button @click="resetForm('ruleForm')"   icon="el-icon-refresh">重置</el-button>
            </el-form-item>
        </el-form>
      </el-card>  
      <el-card>      
      <el-table :data="pageData.content">
          <el-table-column>
              <el-checkbox></el-checkbox>
        </el-table-column>
        <el-table-column prop="contentId" label="id" >
        </el-table-column>
        <el-table-column prop="doctor.doctorName" label="医生姓名" >
        </el-table-column>
        <el-table-column prop="patient.patientName" label="患者姓名" >
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" >
        </el-table-column>
        <el-table-column prop="isInitiator" label="发送者" >
              <template slot-scope="scope">
                <span>{{scope.row.isInitiator== 1 ? '患者' :'医生'}}</span>
            </template> 
        </el-table-column>
        <el-table-column prop="contentText" label="聊天信息" >
        </el-table-column>
      </el-table> 
            <el-row>
                    <el-col :sapn="12" :offset="7">
                                <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="pageData.current"
                                :page-sizes="[2,4, 6, 8]"
                                :page-size="pageData.size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="pageData.total">
                                </el-pagination>
                    </el-col>
            </el-row>     
      </el-card> 
    </el-main>
</template>

<style>

</style>

<script>
export default({
     data() {
           return{
                interActive:{    
                    patientName:'',     
                    doctorName: '',
                    starterDate: '',
                    overDate:'',
                    current:1,
                    size:4,
                    },
                    pageData:{
                            current:1,
                            content:[],
                            total:0,
                            size:4,
                    },
                  data:'',
                }
             },
     mounted() {
         this.onSubmit();
            },
     methods:{
            onSubmit(){
            this.interActive.current=1;
            this.getDate();
            },
            handleSizeChange(size) {
                    this.interActive.size=size
                    this.getDate()
                },
            handleCurrentChange(current) {
                    this.interActive.current=current
                     this.getDate()
                },
            getDate(){        
                    this.interActive.starterDate=this.data[0];
                    this.interActive.overDate=this.data[1];
                    this.$axios.post("/api/biz/ctt/list",this.interActive).then((res)=>{ 
                            if(res.data.code==0){
                                    this.pageData=res.data.data.pageData
                                    this.interActive=res.data.data.searchForm
                            }else{
                                   this.$message.error(res.data.msg)
                                }    
                            })
                    },           
          },
        })
</script>
